<template>
  <Layout>
    <template v-slot:menu>
      <Menu
        key="name"
        @menu-click="onMenuClick"/>
    </template>
    <template v-slot:content>
      <Header/>
      <div class="content">
        <Breadcrumb/>
        <div class="view">
          <router-view v-slot="{Component}">
            <keep-alive :include="cachedComponents">
              <component :is="Component"/>
            </keep-alive>
          </router-view>
        </div>
      </div>
      <div class="footer">©2022 国汽大有时空科技（安庆）有限公司 版权所有</div>
    </template>
  </Layout>
</template>
<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
import Layout from './Layout.vue'
import Header from './Header.vue'
import Menu from './Menu.vue'
import Breadcrumb from './Breadcrumb.vue'

const store = useStore()
const cachedComponents = computed(() => store.state.base.menuList.map(({ name }) => name))

</script>
<style lang="less" scoped>
.content {
  padding: 16px 16px 0 16px;
  width: 100%;
  height: calc(100% - 96px);
}
.view {
  width: 100%;
  height: calc(100% - 44px);
}

.footer {
  height: 32px;
  line-height: 32px;
  text-align: end;
  padding: 0 16px;
  font-size: 12px;
  color: #7f7f7f;
}
</style>
